<template>
  <div class="Login">
    <div class="login-header">
      <router-link to="/homePage">
        <img class="logo-img" src="../assets/images/logos.png" alt="">
      </router-link>
      <div class="login-line"></div>
      <p class="login-text">无损检测智能平台</p>
    </div>
    <div class="login-wrapper">
      <div class="login-right">
        <!-- <img class="login-top" src="../assets/images/logo_img2.png" alt=""> -->
        <img class="login-top" src="../assets/images/logos.png" alt="">
        <YsMLogin class="login-st" userIcon="md-mail" pwdIcon="md-unlock" ref="myLogin" @on-handle-login="handleLogin" userPlaceholder="请输入用户名/邮箱/手机号"  pwdPlaceholder="请输入密码" @on-apply="onApply" :btnLoading="btnLoading" :loginStatus="loginStatus" :borderDisplay="borderDisplay"></YsMLogin>
      </div>
    </div>
    <!-- <Button @click="queryItem">queryItem</Button> -->
    <div class="login-footer">
      <!-- <p>2018北京远舢智能科技有限公司 I 京公网安备 11010502036687号</p> -->
      <p>中国特种设备检测研究院</p>
    </div>

  </div>
</template>
<script>

import { ys_SysAction } from 'ys-utils-js'
export default {
  name: 'YsLoginTest',

  data() {
    return {
      // 传入是否显示border
      borderDisplay: true,
      // loading状态
      btnLoading: false,
      // 申请状态
      loginStatus: 'adopt',
      // 存储当前登录用户名
      loginUserName: {},
      // 是否显示修改密码页面
      isShowModifyPwd: true,
    };
  },
  methods: {
    // 登录回调
    handleLogin(res) {
      this.btnLoading = true;
      this.loginUserName.org_user_id = res.org_user_id;
      this.login(res);
    },
    // 登录
    async login(res) {
      let _this = this
      try {
        const result = await ys_SysAction.userLogin(res, window.GlobalConfig.PaaSCode);
        // 判断接口返回的状态码 -1 需要修改密码 -2 需要申请白名单 -3 申请白名单还在审核中
        switch (result) {
          case -1:
            _this.$YsMessage.info("新用户请重置密码！")
            break;
          case -2:
            _this.loginStatus = "apply";
            break;
          case -3:
            _this.loginStatus = "underReview";
            break;
          case true:
            _this.$YsMessage.success('登录成功~');

            this.$router.push({ name: 'tenantMgmt' });
            // this.$router.push({ name: 'serviceMgmt' });
            break;
          default:
            _this.$YsMessage.error('账号或密码有误~');
            // 清空表单
            _this.$refs.myLogin.clearFrom();
            break;
        }
        _this.btnLoading = false;
      } catch (error) {

        _this.$refs.myLogin.clearFrom();
        _this.btnLoading = false;
      }
    },
    // 是否申请白名单
    async onApply(state) {
      this.loginUserName.org_rs_code = window.GlobalConfig.PaaSCode;
      if (state) {
        const result = ys_SysAction.addUserTermAction(this.loginUserName);
      } else {
        this.$refs.myLogin.clearFrom();
      }
    },
    //单点登录
    // queryItem(item) {

    // },
  },
};
</script>
<style lang="less" scoped>
.Login {
  width: 100%;
  height: 100%;
  // background: #ffffff;
  position: relative;
  // background: #eff3f6 url('../assets/images/logo_bg.png') no-repeat;
  background: #eff3f6 url('../assets/images/logo_bg2.png') no-repeat;
  background-size: 100%;
  /deep/ .titleInfo {
    position: absolute;
    top: 256px;
    z-index: 9999;
    font-size: 16px;
    color: #879faa;
  }
  .login-wrapper {
    display: flex;
    height: calc(100% - 88px);

    .login-right {
      padding: 20px 30px 36px;
      width: 560px;

      background: #ffffff;
      border: 1px solid #cfd7e596;
      box-shadow: 0px 20px 20px rgba(0, 0, 0, 0.1);
      border-radius: 8px;
      position: absolute;
      right: 10%;
      top: 50%;
      margin: -260px 0 0 0;
      .login-st {
        /deep/ .ivu-form-item {
          margin-bottom: 34px;
          .ivu-input {
            height: 56px;
            background: #f3f6f7;
            border: 2px solid transparent;
            padding-left: 46px;
            &:focus {
              border: 2px solid #0488fe;
              background: rgba(4, 136, 254, 0.04);
            }
          }
          // .login-icon {
          .ivu-icon-md-mail {
            font-size: 24px;
            margin: 7px 0 0 10px;
            color: #808695c7;
          }
          .ivu-icon-md-unlock {
            font-size: 24px;
            margin: 7px 0 0 11px;
            color: #808695c7;
          }
          // }
        }
        /deep/ .login_btn {
          // margin-top: 10px;
          height: 62px;
          font-size: 18px;
          background: linear-gradient(314deg, #0073d5 0%, #469be3 100%);
          opacity: 1;
          span {
            color: #fff;
          }
        }
      }
    }
  }
  .login-header {
    width: 100%;
    height: 88px;
    background: #ffffff;
    display: flex;
    align-items: center;

    .logo-img {
      margin-left: 28px;
      margin-top: 10px;
      width: 320px;
    }
    .login-line {
      width: 1px;
      height: 28px;
      border: 1px solid #cfd7e5;
      margin: 0 20px;
      opacity: 0.6;
    }
    .login-text {
      width: 245px;
      height: 37px;
      font-size: 22px;
      font-family: PingFangSC-Semibold;
      line-height: 37px;
      color: #405680;
    }
  }
  .login-footer {
    position: absolute;
    bottom: 38px;
    width: 100%;
    text-align: center;
    p {
      font-size: 14px;
      font-family: PingFangSC-Regular;
      line-height: 20px;
      color: #405680;
    }
  }
  .login-top {
    margin: 16px 0 20px;
    width: 360px;
  }
}
</style>
